<template>
    <div class="teacher-selector">
        <a-select showSearch v-model:value="selectedTeacher" :placeholder="placeholder" @change="handleChange">
            <a-select-option v-for="teacher in teacherList" :key="teacher.id" :value="teacher.name">
                <div class="option-content">
                    <span>{{ teacher.name }}</span>
                    <a-button type="link" @mousedown.stop="showTeacherDetail(teacher)">
                        查看详情
                    </a-button>
                </div>
            </a-select-option>
        </a-select>
    </div>

    <!-- 导师详情弹窗 -->
    <a-modal v-model:open="detailVisible" title="导师详情" @ok="handleDetailOk" width="700px">
        <template v-if="currentTeacher">
            <p><strong>姓名：</strong>{{ currentTeacher.name }}</p>
            <p><strong>学院：</strong>{{ currentTeacher.collegeName }}</p>
            <p><strong>职务：</strong>{{ currentTeacher.office }}</p>
            <p><strong>指导方向：</strong>{{ currentTeacher.guidance }}</p>
            <p><strong>联系电话：</strong>{{ currentTeacher.phone }}</p>
            <p><strong>邮箱：</strong>{{ currentTeacher.email }}</p>
            <p><strong>主授课程：</strong>{{ currentTeacher.course }}</p>
            <p><strong>指导经验：</strong>{{ currentTeacher.guidance }}</p>
            <p><strong>本学期任课班级：</strong>{{ currentTeacher.tClass }}</p>
            <p><strong>指导科目：</strong>{{ currentTeacher.type }}</p>
        </template>
    </a-modal>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getTeacherList_api } from '@/apis';

const props = defineProps({
    modelValue: String,
    placeholder: {
        type: String,
        default: '请选择导师'
    },
    raceId: [String, Number]
});

const emit = defineEmits(['update:modelValue']);

const teacherList = ref([]);
const selectedTeacher = ref(props.modelValue);
const detailVisible = ref(false);
const currentTeacher = ref(null);

// 获取导师列表
const getTeacherList = async () => {
    const res = await getTeacherList_api(props.raceId);
    teacherList.value = res.data;
};

// 处理导师选择
const handleChange = (value) => {
    selectedTeacher.value = value;
    emit('update:modelValue', value);
};

// 显示导师详情
const showTeacherDetail = (teacher) => {
    currentTeacher.value = teacher;
    detailVisible.value = true;
};

// 关闭详情弹窗
const handleDetailOk = () => {
    detailVisible.value = false;
};

onMounted(() => {
    getTeacherList();
});

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
    selectedTeacher.value = newVal;
});
</script>

<style lang="less" scoped>
.teacher-selector {
    width: 100%;
}

.option-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.ant-select) {
    width: 100%;
}
</style>